<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<div class="office-wrapper full-width <c:if test='${empty office and empty param.idx}'>ksr-hide</c:if>">
	<div id="office-${param.idx}" class="office  ui-widget-content ui-corner-all">
		<div class="full-width">
			<div class="title-bar ui-widget-header ui-corner-all full-width padding-vertical-half no-border-all">
				<div class="name float-left padding-horizontal font-16 font-white sans-serif  bold ">office ${param.count}</div>
				<div class="trash <c:if test="${not empty param.officesCount and param.officesCount eq 1}">ksr-hide</c:if> float-right padding-horizontal font-15 font-white bold pointer" ref-id="#office-${param.idx}"><i class="icon-trash"></i></div>
			</div>
			<input type="hidden" value="${office.id}" name="offices[${param.idx}].id" id="office-id-${param.idx}"/>
			<div class="margin-bottom padding-all">
				<div class="input-item font-16 full-width margin-vertical-half">
		  			<div class="errContainer  errorMsg">
						<label for="office-addressLine1-${param.idx}" class="error"></label>
					</div>	
		  			<div class="full-width table-disp">
		  				<label for="office.addressLine1" class="label table-cell text-left">Address L1:</label>
			  			<div class="table-cell">
			  				<input type="text" value="${office.address.addressLine1}" name="offices[${param.idx}].address.addressLine1" id="office-addressLine1-${param.idx}" class="text-field required full-width font-16 form-control" placeholder="address line1"  ${field_property}/>
			  			</div>
		  			</div>
		  		</div>  				

				<div class="input-item font-16 full-width margin-vertical-half">
		  			<div class="full-width table-disp">
		  				<label for="office.addressLine2" class="label table-cell text-left">Address L2:</label>
			  			<div class="table-cell">
			  				<input type="text" value="${office.address.addressLine2}" name="offices[${param.idx}].address.addressLine2" id="office-addressLine2-${param.idx}" class="text-field full-width font-16 form-control" placeholder="address line2"  ${field_property}/>
			  			</div>
		  			</div>
		  		</div>  				

				<div class="input-item font-16 full-width margin-vertical-half">
		  			<div class="errContainer  errorMsg">
						<label for="office-city-${param.idx}" class="error"></label>
					</div>	
		  			<div class="full-width table-disp">
		  				<label for="office.city" class="label table-cell text-left">City:</label>
			  			<div class="table-cell">
			  				<input type="text" value="${office.address.city}" name="offices[${param.idx}].address.city" id="office-city-${param.idx}" class="text-field required full-width font-16 form-control" placeholder="City"  ${field_property}/>
			  			</div>
		  			</div>
		  		</div>  
				<div class="input-item font-16 full-width margin-vertical-half">
		  			<div class="errContainer  errorMsg">
						<label for="office-state-${param.idx}" class="error"></label>
					</div>	
		  			<div class="full-width table-disp">
		  				<label for="office.state" class="label table-cell text-left">State:</label>
			  			<div class="table-cell">
			  				<input type="text" value="${office.address.state}" name="offices[${param.idx}].address.state" id="office-state-${param.idx}" class="text-field required full-width font-16 form-control" placeholder="State"  ${field_property}/>
			  			</div>
		  			</div>
		  		</div>  
				<div class="input-item font-16 full-width margin-vertical-half">
		  			<div class="errContainer  errorMsg">
						<label for="office-zip-${param.idx}" class="error"></label>
					</div>	
		  			<div class="full-width table-disp">
		  				<label for="office.zip" class="label table-cell text-left">Zip:</label>
			  			<div class="table-cell">
			  				<input type="text" value="${office.address.zip}" name="offices[${param.idx}].address.zip" id="office-zip-${param.idx}" class="text-field required full-width font-16 form-control" placeholder="Zip"  ${field_property}/>
			  			</div>
		  			</div>
		  		</div>  
				<div class="input-item font-16 full-width margin-vertical-half">
		  			<div class="errContainer  errorMsg">
						<label for="office-emailAddress-${param.idx}" class="error"></label>
					</div>	
		  			<div class="full-width table-disp">
		  				<label for="office.emailAddress" class="label table-cell text-left">Email:</label>
			  			<div class="table-cell">
			  				<input type="text" value="${office.emailAddress}" name="offices[${param.idx}].emailAddress" id="office-emailAddress-${param.idx}" class="text-field required email full-width font-16 form-control" placeholder="email address"  ${field_property}/>
			  			</div>
		  			</div>
		  		</div>  
				<div class="input-item font-16 full-width margin-vertical-half">
		  			<div class="errContainer  errorMsg">
						<label for="office-phoneNumber-${param.idx}" class="error"></label>
					</div>	
		  			<div class="full-width table-disp">
		  				<label for="office.phoneNumber" class="label table-cell text-left">Phone:</label>
			  			<div class="table-cell">
			  				<input type="text" value="${office.phoneNumber}" name="offices[${param.idx}].phoneNumber" id="office-phoneNumber-${param.idx}" class="text-field required full-width font-16 form-control" placeholder="phone number"  ${field_property}/>
			  			</div>
		  			</div>
		  		</div>  
				<div class="input-item font-16 full-width margin-vertical-half">
		  			<div class="errContainer  errorMsg">
						<label for="office-specialty-${param.idx}" class="error"></label>
					</div>	
		  			<div class="full-width table-disp">
		  				<label for="office.specialty" class="label table-cell text-left">Specialty:</label>
			  			<div class="table-cell">
			  				<input type="text" value="${office.specialty}" name="offices[${param.idx}].specialty" id="office-specialty-${param.idx}" class="text-field required full-width font-16 form-control" placeholder="specialty"  ${field_property}/>
			  			</div>
		  			</div>
		  		</div>  
				<div class="input-item font-16 full-width margin-vertical-half">
		  			<div class="full-width table-disp">
		  				<label for="office.price" class="label table-cell text-left">Price ($/h):</label>
			  			<div class="table-cell">
			  				<input type="text" value="${office.price}" name="offices[${param.idx}].price" id="office-price-${param.idx}" class="text-field full-width font-16 form-control" placeholder="price"  ${field_property}/>
			  			</div>
		  			</div>
		  		</div>  
		  		<div class="input-item font-16 full-width margin-vertical-half">
		  			<div class="errContainer  errorMsg">
						<label for="description" class="error"></label>
					</div>	
		  			<div class="full-width table-disp">
		  				<label for="office.description" class="label table-cell text-left">Description:</label>
			  			<div class="table-cell">
			  				<textarea name="offices[${param.idx}].description" class="text-field full-width font-16 form-control" placeholder="office description"  ${field_property}>${office.description}</textarea>
			  			</div>
		  			</div>
		  		</div>		
	  		</div>
   		</div>
	</div>	    		
</div>	    		
